<template>
	<div id="msg">
		<Top></Top>
		<div class="wrap">
			<el-container>
				<el-header style="height: 45px;">
					<div class="head-left">
						30天内联系人
					</div>
					<el-breadcrumb separator="|">
						<!--<el-breadcrumb-item :to="{ path: '/' }">张女士</el-breadcrumb-item>-->
						<el-breadcrumb-item>张女士</el-breadcrumb-item>
						<el-breadcrumb-item>万息科技</el-breadcrumb-item>
						<el-breadcrumb-item>HR</el-breadcrumb-item>
					</el-breadcrumb>
				</el-header>
				<el-container>
					<el-aside width="30%">
						<ul class="chat-list">
							<li v-for="item in 8" :key="item" @click="handPersonChat">
								<img src="../../static/img/hr2.jpg" alt="" />
								<div class="chat-person">
									<div class="person-name">
										<span class="name">张女士</span>
										<span class="time">12：00</span>
									</div>
									<div class="company">
										<a class="company-name">万息科技</a>
										<a class="person-position">HR</a>
									</div>
								</div>
							</li>
						</ul>
					</el-aside>
					<el-main>
						<div class="defalut-show" v-if="this.$route.path=='/message'">
							<i class="el-icon-s-grid"></i>
							<div class="tip">
								Tips:&nbsp;&nbsp;<span>与您进行过沟通的 Boss 都会在左侧列表中显示</span>
							</div>
						</div>
						<router-view></router-view>
					</el-main>
				</el-container>
			</el-container>
		</div>
		<!--<Bottom></Bottom>-->
	</div>
</template>

<script>
	import Top from './top'
	import Bottom from './bottom'

	export default {
		components: {
			Top,
			Bottom
		},
		data() {
			return {
				personData: [],
			}
		},
		methods: {
			handPersonChat() {
				this.$router.push({
					name: 'chatroom'
				})
			}
		}
	}
</script>

<style>
	#msg .el-breadcrumb span {
		color: #999;
	}
</style>
<style scoped>
	#msg .el-breadcrumb {
		margin-left: 30%;
		margin-top: 15px;
		font-size: 14px;
		padding-left: 40px;
		box-sizing: border-box;
	}
	
	.el-header {
		line-height: 45px;
	}
	
	.el-header,
	.el-footer {
		background-color: #f1f1f1;
		color: #333;
		text-align: center;
		line-height: 45px;
		/*border: 1px solid red;*/
	}
	
	.el-aside {
		background-color: #fff;
		color: #333;
		/*text-align: center;*/
		/*line-height: 200px;*/
		height: 600px;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	
	.el-aside::-webkit-scrollbar {
		width: 8px;
		height: 16px;
	}
	/*定义滚动条轨道 内阴影+圆角*/
	
	.el-aside::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		background-color: #fff;
	}
	/*定义滑块 内阴影+圆角*/
	
	.el-aside::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-color: #ccc;
	}
	/*主体部分*/
	
	.el-main {
		background-color: #fff;
		color: #333;
		text-align: center;
		border-top: 1px solid #ddd;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column wrap;
		position: relative;
	}
	
	.el-main i {
		font-size: 130px;
	}
	
	.el-main .tip {
		color: #333;
		margin-top: 15px;
	}
	
	.el-main .tip span {
		color: #999;
	}
	
	body>.el-container {
		margin-bottom: 40px;
	}
	
	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}
	
	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
	
	#msg {
		height: 100%;
		background-color: #fafafa;
	}
	
	#msg .el-header {
		position: relative;
	}
	
	.head-left {
		position: absolute;
		left: 0;
		top: 0;
		width: 30%;
		border-right: 1px solid #ddd;
		color: #999;
		font-size: 14px;
		text-align: left;
		padding-left: 30px;
		box-sizing: border-box;
	}
	
	.chat-list li {
		/*border: 1px solid red;*/
		display: flex;
		padding: 15px 30px;
	}
	
	.chat-list li:hover {
		background-color: rgba(150, 150, 150, .1);
	}
	
	.chat-person {
		margin-left: 15px;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.chat-list img {
		width: 50px;
		border-radius: 50%;
	}
	
	.chat-list li:hover {
		cursor: pointer;
	}
	
	.person-name {
		display: flex;
		justify-content: space-between;
	}
	
	.person-name .name {
		font-size: 14px;
		color: #333;
	}
	
	.person-name .time {
		font-size: 12px;
		color: #999;
	}
	
	.chat-person a {
		color: #999;
		font-size: 12px;
		margin-right: 20px;
	}
	
	.company-name {
		position: relative;
	}
	
	.chat-person .company-name:after {
		content: "";
		width: 2px;
		height: 12px;
		border-right: 1px solid #ccc;
		position: absolute;
		top: 2px;
		right: -12px;
	}
</style>